<template>
  <el-drawer
    :visible.sync="showDrawer"
    modal-append-to-body
    append-to-body
    size="80vw"
    :close-on-click-modal="false"
     @close="handleClose"
  >
   <div slot="title" style="cursor: pointer;display: flex;">
    <i class="el-icon-arrow-left" @click="showDrawer = false"></i>
    <el-row class="card-title" v-if="student_info">
        <span>年级:{{student_info.grade_name}}</span>
        <span>姓名:{{student_info.name}}</span>
    </el-row>
    <h2 style="text-align: center;flex: 1; margin-left: -20%;">运动计步</h2>
   </div>
    <el-card shadow="never" body-style="padding: 10px 20px">
        <div class="info-item">
          <span>学号:{{student_info.student_no }}</span>
          <span>状态:{{student_info.is_active===1?'在线':'离线'}}</span>
           <span>电量:{{(student_info.electricity_level )+'%' }}</span>
        
          <span>时间:{{$util.toDateString(student_info.create_time )}}</span>
        
          <span>IMEI:{{student_info.imei }}</span>
          <span>手机:{{student_info.phone }}</span>
        </div>
        <el-row style="padding: 50px 20px 30px" >
          <el-col :lg="10" :md="10">
            <el-card
                shadow="never"
                header="今日步数"
                body-style="padding: 10px 5px 0 0;">
                <ele-chart
                  ref="visitPieChart"
                  style="height: 323px;"
                  :option="visitPieChartOption"/>
              </el-card>     
          </el-col>
          <el-col :lg="14" :md="14">
            <el-card
                shadow="never"
                header="近一周运动步数"
                body-style="padding: 10px 5px 0 0;">
                <ele-chart
                  ref="visitHourChart"
                  style="height: 323px;"
                  :option="visitHourChartOption"/>
              </el-card>
          </el-col>
        </el-row>
    </el-card>
  </el-drawer>
</template>
<script>
import EleChart from 'ele-admin/packages/ele-chart';
export default {
  name: "exercisePedometer",
  components: { EleChart},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    student_info: Object,
    week_trip: Array,
    day_trip:Object
  },
  data() { 
    return {
      visiPieChartOption: {}
    }
  },
  watch: {
  },
  created() { 
    console.log("22",this.visible)
  },
  computed: {
    showDrawer: {
      set(val) { 
        this.$emit("closeDrawer",val)
      },
      get() { 
        return this.visibleDrawer
      }
      
    },
    // 最近一周折线图配置
    visitHourChartOption() {
      if (this.week_trip && this.week_trip.length > 0) {
        return {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['当天总步数'],
            right: '50%'
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.week_trip.map(d => d.date)
            }
          ],
          yAxis: [
            {
              type: 'value',
              data: [0, 5000, 10000, 15000, 20000, 25000]
            }
          ],
          series: [
            {
              name: '当天总步数',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              areaStyle: {
                opacity: 0.5
              },
              data: this.week_trip.map(d => parseFloat(d.step_count))
            }
          ]
        } 
      }else { 
        return {}
      }
    },
    // 今日步数
    visitPieChartOption() { 
      if (this.day_trip) {
        return {
          tooltip: {},
          xAxis: [
           {
            show:false,
            }
          ],
          yAxis: [
          {
            show:false,
          }],
          series: [
            {
              name:'步数',
              type: 'pie',
              radius: ['45%', '65%'],
              center:['50%' ,'40%'],
              data: [{ value: this.day_trip.step_count, name: '步数' }],
              avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            }
          ],
          graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '步数' + this.day_trip.step_count,
              textAlign: 'center',
              fill: '#000',
              width: 30,
              fontSize: 20,
              rich: {
                a: {
                  fontSize: 20,
                  color: '#000',
                  lineHeight: 22,
                  align: 'center'
                },
                b: {
                  fontSize: 14,
                  color: '#666',
                  lineHeight: 22,
                  align: 'center'
                }
              }
            }
          }
        } 
      }else { 
        return {}
      }
    }
  },
  methods: {
    /* 更新visible */
    handleClose() {
      this.showDrawer = false;
    },
    activated() {
      ['visitPieChart', 'visitHourChart'].forEach((name) => {
        this.$refs[name].resize();
      });
    }
  }
}
</script>
<style scoped>
.card-title {
  padding: 0 20px;
}
.card-title span{
    margin-right: 30px;
}
.info-item span{
  margin-right: 30px;
}
</style>